<style lang="less" scoped>
.first-login-setPwd {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;

  .first-login-setPwd-content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    padding-bottom: 80px;
    display: flex;
    justify-content: center;

    .setpwd-wrapper {
      margin-top: 72px;
      .user-info-bg {
        width: 600px;
        height: 96px;
        border-radius: 8px;
        background-color: rgba(241, 241, 241, 1);
        display: flex;
        align-items: center;
        padding-left: 40px;
      }

      .user-info {
        .user-info-bg;
      }

      .form-input {
        width: 462px;
        border-radius: 16px;
        background-color: rgba(241, 241, 241, 1);
        font-size: 28px;
        border: none;
        margin-bottom: 0;
        line-height: normal;
        padding: 0 0 0 6px;
      }

      .marginBottom60 {
        margin-bottom: 60px;
      }

      .user-info-pwd-message {
        position: relative;
        .user-info-bg;
        .form-input {
          width: 240px;
        }

        .text {
          font-size: 32px;
          font-weight: 400;
          color: rgba(61, 60, 60, 1);
        }
        .get-validate-code {
          position: absolute;
          right: 32px;
          top: 70px;
          width: 128px;
          height: 56px;
          line-height: 56px;
          border-radius: 4px;
          background-color: rgba(81, 104, 255, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 30px;
          margin: 0;
          padding: 0;
          text-align: center;
          vertical-align: text-bottom !important;
        }
      }

      input::-webkit-input-placeholder {
        color: #aab2bd;
      }

      .set-pwd-btn {
        margin-top: 106px;
        width: 600px;
        height: 96px;
        //margin-bottom: 110px;
        border-radius: 16px;
        background-color: #536dfe;
        box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
        line-height: 66px;
        color: rgba(255, 255, 255, 1);
        font-size: 36px;
      }

      .desc {
        margin-bottom: 30px;
        font-size: 24px;
        color: rgba(61, 60, 60, 1);
      }
      .jeicon-eye {
        position: absolute;
        right: 26px;
        color: #536dfe;
        font-size: 22px;
      }
      .jeicon-eye-close {
        position: absolute;
        right: 32px;
        color: #536dfe;
        font-size: 30px;
      }

      .new-pwd {
        width: 402px !important;
      }
      .confim-new-pwd {
        width: 338px !important;
      }
    }
  }
}
</style>

<template>
  <div class="first-login-setPwd">
    <header-bar
      center-color="#3D3C3C"
      left-color="#536DFE"
      bg-color=""
    >
      <span slot="title">设置新密码</span>
    </header-bar>
    <div class="first-login-setPwd-content">
      <div class="setpwd-wrapper">
        <div class="desc">
          您的企业已设置：密码需为6位以上字母+数字组合
        </div>
        <div class="user-info-pwd-message marginBottom60">
          <span class="text">新密码</span>
          <input
            v-show="showPwd"
            v-model="loginInfo.pwd"
            type="password"
            placeholder="填写新密码"
            class="form-input new-pwd"
            maxlength="20"
          >
          <input
            v-show="!showPwd"
            v-model="loginInfo.pwd"
            type="text"
            placeholder="填写新密码"
            maxlength="20"
            class="form-input new-pwd"
          >
          <i
            v-show="!showPwd"
            class="jeicon jeicon-eye viewpwd"
            @tap="showPwd=!showPwd"
          />
          <i
            v-show="showPwd"
            class="jeicon jeicon-eye-close viewpwd"
            @tap="showPwd=!showPwd"
          />
        </div>

        <div class="user-info-pwd-message ">
          <span class="text">确认新密码</span>
          <input
            v-show="showConfirmPwd"
            v-model="loginInfo.confirmPwd"
            type="password"
            placeholder="确认新密码"
            class="form-input confim-new-pwd"
            maxlength="20"
          >
          <input
            v-show="!showConfirmPwd"
            v-model="loginInfo.confirmPwd"
            type="text"
            placeholder="确认新密码"
            class="form-input confim-new-pwd"
            maxlength="20"
          >
          <i
            v-show="!showConfirmPwd"
            class="jeicon jeicon-eye viewpwd"
            @tap="showConfirmPwd=!showConfirmPwd"
          />
          <i
            v-show="showConfirmPwd"
            class="jeicon jeicon-eye-close viewpwd"
            @tap="showConfirmPwd=!showConfirmPwd"
          />
        </div>
        <button
          class="set-pwd-btn"
          @tap="submit"
        >
          确定
        </button>
      </div>
    </div>

    <modal-message v-show="showModal">
      <div slot="modalMessageTitle">
        密码修改成功
      </div>
      <div
        slot="modalMessageFotter"
        @tap="reLogin"
      >
        重新登录
      </div>
    </modal-message>
  </div>
</template>

<script>
import { openWindow } from '@/helper';
import { validate, toastValidate } from '../../../../util/validate';
import modalMessage from '../../components/modal-message/index';
import { fetchUpdatePwd } from '../../actions/login';
// import { pageContainer } from '@/helper/plugin';

export default {
  name: 'FirstLoginSetPwd',
  components: {
    'modal-message': modalMessage,
  },
  data() {
    return {
      loginInfo: {},
      showPwd: true,
      showConfirmPwd: true,
      showModal: false,
      params: {},
    };
  },
  created() {},
  mounted() {
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
    // pageContainer('first-login-setPwd-content');
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === 'firstLogin') {
        vm.loginInfo = {};
        vm.showPwd = true;
        vm.showModal = false;
        vm.showConfirmPwd = true;
      }
    });
  },
  methods: {
    // 提交
    async submit() {
      if (
        !toastValidate('密码', validate.isNull(this.loginInfo.pwd))
        || !toastValidate(
          '密码',
          validate.isNull(this.loginInfo.confirmPwd)
            || !toastValidate(
              '',
              validate.regPwd(this.loginInfo.pwd),
              '密码为6位以上字母+数字',
            ),
        )
        || !toastValidate(
          '',
          validate.regPwd(this.loginInfo.confirmPwd),
          '密码为6位以上字母+数字',
        )
      ) {
        return false;
      }

      if (this.loginInfo.pwd !== this.loginInfo.confirmPwd) {
        mui.toast('两次密码输入不一致');
        return false;
      }
      const res = await fetchUpdatePwd({
        j_username: this.params.phone,
        j_password: this.loginInfo.pwd,
        code: this.params.validateCode,
        type: 'PHONE',
        j_dept: this.params.deptId,
      });
      if (res.success) {
        this.showModal = true;
      } else {
        mui.toast('设置密码失败');
      }
    },
    reLogin() {
      if (window.plus) {
        plus.runtime.restart();
      }
      // this.$router.replace({ name: 'login' });
    },
  },
};
</script>
